<template>
	<view class="phone">
		<p>欢迎登录{{configInfo.site_title}}！</p>
		<view>
			<img :src="$imgUrl + configInfo.logo" />
			<view>
				<input type="number" :maxlength='11' placeholder="请输入手机号" v-model="params.mobile">
			</view>
			<view class="border">
				<input type="text" placeholder="请输入验证码" maxlength="6" v-model="params.code">
				<button @click="sendCode">{{get}}</button>
			</view>
			<button @click="bindMobile">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					mobile: "",
					code: "",
				},
				get: '获取验证码',
				Interval: '',
				configInfo:{}
			};
		},
		onLoad() {
			this.configInfo = JSON.parse(uni.getStorageSync('configInfo'));
		},
		methods: {
			sendCode() {
				if (!this.params.mobile) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none',
						duration: 2000
					});
					return
				}
				if (this.get == '获取验证码') {
					this.$httpRequest('/user/sendSmsCode', {
						mobile: this.params.mobile
					}).then(() => {
						this.get = 60
						this.Interval = setInterval(() => {
							this.get--;
							if (this.get == 0) {
								this.get = '获取验证码'
								clearInterval(this.Interval)
							}
						}, 1000)
					})
				}
			},
			bindMobile() {
				this.$httpRequest('/user/bindMobile', this.params).then(res => {
					// 跳转到之前获取授权的页面

					let currentUrl = uni.getStorageSync('currentUrl');
					let defaultUrl = '/pages/home/home';
					if (currentUrl) {
						let urlInfo = JSON.parse(currentUrl);
						if (urlInfo.flag) {
							uni.switchTab({
								url: urlInfo.url
							});
						} else {
							uni.redirectTo({
								url: urlInfo.url
							});
						}
					} else {
						window.location.href = this.$pages +"#/pages/home/home"
					}
				});
			},
		},
	}
</script>

<style lang="less">
	.phone {
		width: 100vw;
		height: 100vh;
		background: url('../../static/52.png');
		background-size: 100% 100%;
		padding-top: 272rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		&>p {
			font-size: 20px;
			color: #fff;
			font-weight: bold;
			margin: 0 0 0 48rpx;
		}

		&>view {
			width: 100%;
			margin-top: 62rpx;
			flex: 1;
			background: #fff;
			border-radius: 40rpx 40rpx 0 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			&>button {
				width: 458rpx;
				height: 88rpx;
				line-height: 88rpx;
				background: #53C277;
				color: #fff;
				margin-top: 220rpx;
			}

			&>img {
				margin: 74rpx 0 116rpx;
				width: 200rpx;
				height: 200rpx;
			}

			&>.border {
				border-bottom: 0;
			}

			&>view {
				width: 522rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #CBCBCB;

				&>input {
					flex: 1;
					height: 100%;
					font-size: 18px;
				}

				&>button {
					width: 146rpx;
					height: 48rpx;
					line-height: 48rpx;
					font-size: 12px;
					padding: 0;
					background: #53C277;
					color: #fff;
				}
			}
		}
	}
</style>